<template>
    <div class="lock-table-container" :style="{ top: top + 'px', left: left + 'px', opacity: opacity }" ref="lockTable">
        <table cellspacing="0" cellspadding="0" style="table-layout:fixed;border-collapse:collapse" :style="{ width: tableWidth + 'px' }">
            <colgroup>
                <col v-for="(c, index) of cols" :class="c.class" :style="{ display: c.display ? '' : 'none' }" :key="index">
            </colgroup>
            <tbody>
                <tr v-for="(row, index) of rows" :key="index" :class="row.class" :style="row.style">
                    <td v-for="(cell, i) of row.cells" :key="i" :rowspan="cell.rowspan" :colspan="cell.colspan" :class="cell.class" :style="cell.style"
                        v-html="cell.html" @click="clickCell(cell)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
import EventBus, { DATA_LOADED } from '../Event';
import { LockRow, LockRowCol } from './hooks';

const props = defineProps<{
    left: number;
    top: number;
    lockRowNumber: number,
    lockColNumber: number,
    opacity: number
}>();
const cols: Ref<LockRowCol[]> = ref([]);
const rows: Ref<LockRow[]> = ref([]);
const tableWidth = ref(0);
EventBus.on(DATA_LOADED, () => {
    lazyBuild();
});
const lazyBuild = () => {
    setTimeout(() => {
        buildTable();
    }, 50);
}
const clickCell=(cell:any)=>{
    cell.sourceTd.click();
}
const lockTable = ref();
const buildTable = () => {
    tableWidth.value = 0;
    cols.value.splice(0, cols.value.length);
    rows.value.splice(0, rows.value.length);
    const lockTableDom = lockTable.value as HTMLElement;

    const table = (lockTableDom.parentElement as HTMLElement).querySelector('table') as HTMLTableElement;
    for (let child of table.children) {
        if (child.nodeName.toLowerCase() === 'colgroup') {
            let index = 0;
            for (let col of child.children) {
                if (col.nodeName.toLowerCase() !== 'col') {
                    continue;
                }
                if (index++ >= props.lockColNumber) {
                    break;
                }
                const colDom = col as HTMLTableColElement;
                const style = window.getComputedStyle(colDom);
                const show = style.display;
                let display = true;
                if (show === 'none') {
                    display = false;
                } else {
                    tableWidth.value += parseInt(style.width);
                }
                cols.value.push({ class: col.className, display });
            }
        } else if (child.nodeName.toLowerCase() === 'tbody') {
            let rowIndex = 0;
            for (let tr of child.children) {
                if (tr.nodeName.toLowerCase() !== 'tr') {
                    continue;
                }
                const trDom = tr as HTMLTableRowElement;
                if (trDom.style.display === 'none') {
                    continue;
                }
                if (rowIndex++ >= props.lockRowNumber) {
                    break;
                }
                const trStyle = trDom.style.cssText;
                const trClass = trDom.className;
                const row = {
                    style: trStyle,
                    class: trClass,
                    cells: []
                };
                rows.value.push(row);
                let index = 0, prevTotalColspan = 0;
                let leftRowCount = props.lockRowNumber - rowIndex;
                const tds = tr.querySelectorAll('td');
                for (let td of tds) {
                    if (td.nodeName.toLowerCase() !== 'td') {
                        continue;
                    }
                    const tdDom = td as HTMLTableCellElement;
                    if (tdDom.style.display === 'none') {
                        continue;
                    }
                    const maxColNum = index + prevTotalColspan;
                    if (maxColNum >= tds.length || maxColNum >= props.lockColNumber) {
                        break;
                    }
                    const tdStyle = tdDom.style.cssText;
                    let tdClass = tdDom.className;
                    let rowspan = tdDom.rowSpan;
                    if (rowspan) {
                        if (rowspan >= leftRowCount) {
                            rowspan = leftRowCount || 1;
                        }
                    }
                    if (index === props.lockRowNumber - 1 || (rowspan && rowspan === leftRowCount)) {
                        tdClass = tdClass ? tdClass + ' no-border-bottom' : 'no-border-bottom';
                    }
                    let colspan = tdDom.colSpan;
                    if (colspan) {
                        if (colspan > 1) {
                            prevTotalColspan += colspan - 1;
                        }
                        const leftColCount = props.lockColNumber - maxColNum;
                        if (colspan >= leftColCount) {
                            colspan = leftColCount || 1;
                        }
                    }

                    const html = tdDom.innerHTML;
                    const cell = {
                        html,
                        rowspan,
                        colspan,
                        style: tdStyle,
                        class: tdClass,
                        sourceTd: tdDom
                    };
                    row.cells.push(cell as never);
                    index++;
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.lock-table-container {
    position: absolute;
    z-index: 0;
    background: #fff;
    box-shadow: rgb(0 0 0 / 80%) 0px 0px 6px -2px;
    font-family: 微软雅黑;
    font-size: 10pt;
}

.lock-table-container table tbody tr td:last-child {
    border-right: none !important;
}
</style>